<script setup lang="ts">
import { ref } from 'vue';
import { jump, router, toast } from '@/utils/tools'
import { onShow,onReachBottom,onHide } from '@dcloudio/uni-app';
import { userCouponList } from '@/apis/address';
import noneBox from '@/components/noneBox/noneBox.vue';
import config from '@/config/index.js';
import { computed } from 'vue';

const has_more = ref(true)
const status = ref('loadmore')
const addressLists = ref([]);
// 是否默认
const isDefault = ref(false);
const listsub = ref(['未使用', '已使用', '已过期'])
const current = ref(0)
const state = ref(0) //0-未使用 1-已使用 2-已过期
const pageSize = ref(10) //行数
const pageNum = ref(1) //页数
const change = (index:any)=> {
  addressLists.value = [];
  has_more.value = true;
  current.value = index;
  state.value = index
  pageNum.value = 1
  getList()
}
const handleTrash = (id: number) => {
    // toast('已删除');
    // apiAddressDel({ id }).then((res: any) => {
    //     if (res.code == 200) {
    //         toast('删除成功！');
    //         getList();
    //     }
    // });
}
const handleEdit = (row: any) => {
    // toast('已修改');
    router(`/pagesMy/address/add?id=${row.id}&sence=edit`);
}

const handleDefault = (row: any) => {
    // apiAddressEdit({
    //     id: row.id,
    //     state: !row.state ? 1 : 0,
    // }).then((res: any) => {
    //     if (res.code == 200) {
    //         toast('设置默认地址成功！');
    //         getList();
    //     }
    // });
    // toast('已修改');
    // isDefault.value = !isDefault.value;


}
const handleAdd = () => {
    toast('点击了添加按钮');
    jump({ url: '/pagesMy/address/add', method: 'navigateTo' });
    // radio.value = !radio.value;
}
// 获取列表
const getList = async () => {
    let params = {
      state: state.value, //0-未使用 1-已使用 2-已过期
      pageSize: pageSize.value, //行数
      pageNum: pageNum.value //页数
    }
    let lists = await userCouponList(params);
    // addressLists.value = lists.rows;
    let oldList = lists.rows;
    addressLists.value = [...addressLists.value, ...oldList]
    has_more.value = addressLists.value.length < lists.total
}

onShow(() => {
    getList();
})
onHide(() => {
  pageNum.value = 1; //页数
  addressLists.value = [];
  has_more.value = true;
})
onReachBottom(() => {
  if (has_more.value) {
    status.value = 'loading';
    pageNum.value++;
    getList()
  }
});
</script>
<template>
    <view class="container">
      <uv-subsection :list="listsub" :current="current" @change="change" bgColor="#ECECEC" activeColor="#000000" inactiveColor="#000000" custom-item-style="border-radius: 30rpx;" ></uv-subsection>
        <view v-for="(item,index) in addressLists" :key="item.index" class="coupon-wrap" :class="item.state != 0 ? 'filtercolor':''">
          <view class="l-card">
              <view class="l-cardlft">
                <view class="coord-money">
                  <view>¥</view>
                  <view class="price">{{item.couponMoney}}</view>
                </view>
                <view class="coord-title">
                  <view class="info">推荐优惠</view>
                  <view class="date">{{item.periodValidity}}到期</view>
                </view>
              </view>
              <!-- <view>
                <label class="radio" @click="handleDefault(item)">
                  <radio value="r1" style="transform:scale(0.7)" :checked="item.state == 0 ? false : true"/>
                </label>
              </view> -->
          </view>
        </view>
        <!-- 加载更多 -->
        <view v-if="addressLists.length" class="loadmores">
          <uv-load-more :status="has_more ? status : 'nomore'" />
        </view>
    </view>
    <!-- <view class="ok-btn">
      <view class="btn-view flex flex-center" @click="handleAdd">
          <view class="flex flex-center">
              <button class="btn-text">
                确定
              </button>
          </view>
      </view>
    </view> -->
    <noneBox v-if="addressLists.length <= 0"></noneBox>
</template>
<style scoped lang="scss">
.coupon-wrap{
  margin: 30rpx;
}
.l-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: url("https://leshi-oss.oss-cn-qingdao.aliyuncs.com/c263d7b5-5012-41d4-81a5-79cb3c4f60df.png") no-repeat center;
    background-size: 100% 100%;
    padding: 20rpx 30rpx;
}

.container {
    padding-bottom: 150rpx;
}
.ok-btn{
  display: flex;
  justify-content: center;
  background: #fff;
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 10rpx 0;
}
.btn-view {
    // position: fixed;
    // bottom: 0;
    background-color: #C7452F;
    width: 90%;
    height: 100rpx;
    border-radius: 50rpx;
    .btn-text {
        color: #ffffff;
        font-size: 36rpx;

    }


    image {

        width: 36rpx;
        height: 36rpx;
    }
}

.coord-money {
  color: #D40C26;
  display: flex;
  align-items: center;
  font-weight: bold;
  .price{
    font-size: 84rpx;
  }
}
.l-cardlft{
  display: flex;
  align-items: center;
}
.coord-title{
  margin-left: 72rpx;
  .info{
    font-weight: bold;
    font-size: 34rpx;
    color: #000000;
  }
  .date{
    font-weight: normal;
    font-size: 24rpx;
    color: #595959;
    margin-top: 20rpx;
  }
}
 
::v-deep .wx-radio-input.wx-radio-input-checked {
  background-color: #C7452F !important;
  border-color: #C7452F !important;
  color: #ffffff !important;
}
::v-deep .uni-radio-input.uni-radio-input-checked {
  background-color: #C7452F !important;
  border-color: #C7452F !important;
  color: #ffffff !important;
}
.loadmores{
  padding-bottom: 30rpx;
}
.filtercolor{
  filter: grayscale(1);
}
</style>
